<template>
	<view>
		<div class='box'>
			<div class='demo' v-for="item in FansList" :key="item.id">
				<div class='avatar'>
					<u-avatar :src="item.avatar" shape="square" size='50'></u-avatar>
				</div>
				<div class='content'>
					<div class='nickname'>{{item.nickname}}</div>
					<div class='sign'>{{item.signature}}</div>
					<div class='fansNum'>{{item.fansnum}}位粉丝</div>
				</div>
				<div class='BTN'>
					<u-button v-show="item.attention === 0" color='#28D2D1' icon="plus" text="关注" iconColor='#fff' @click='sure(item.id)'></u-button>
					<u-button v-show="item.attention === 1" color='#d4d4d4' text="已关注" :plain="true" @click='cancel(item.id)'></u-button>
				</div>
			</div>
			
		</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				FansList:[]
			}
		},
		mounted() {
			this.$api.DLQgetFans().then((res)=>{
				// console.log(res)
				this.FansList = res.data
			})
		},
		methods:{
			sure(id){
				this.$api.DLQupdateFans({id:id,attention:1}).then((res)=>{
					// console.log(res)
					if(res.code == 200){
						this.$api.DLQgetFans().then((res)=>{
							this.FansList = res.data
						})
					}
				})
			},
			cancel(id){
				this.$api.DLQupdateFans({id:id,attention:0}).then((res)=>{
					// console.log(res)
					if(res.code == 200){
						this.$api.DLQgetFans().then((res)=>{
							this.FansList = res.data
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.box{
	margin: 40upx;
	.demo{
		padding: 30upx;
		border-radius: 16upx;
		box-shadow: 0 0 2px 3px #F9F9F9;
		display: flex;
		margin-bottom: 40upx;
		.avatar{
			padding-right: 30upx;
		}
		.content{
			.nickname{
				margin-bottom: 10upx;
				font-weight: 600;
			}
			.sign{
				margin-bottom: 10upx;
				font-size: 24upx;
				color: #606266;
			}
			.fansNum{
				font-size: 24upx;
				color: #d4d4d4;
			}
		}
		.BTN{
			display: flex;
			align-items: center;
			margin-left: 20upx;
			width: 140upx;
		}
	}
}
</style>